<template>
    <div class="quantity_box">
        <div class="num_box">
            <div class="text_t">浏览总人数</div>
            <div class="text_num">{{ onReplace(state.view_people) }}</div>
        </div>
        <div class="num_box">
            <div class="text_t">浏览总次数</div>
            <div class="text_num">{{ onReplace(state.view_num) }}</div>
        </div>
        <div class="num_box">
            <div class="text_t">浏览总时长</div>
            <p v-if="!isExternalLink" class="population_num">
                <span class="num">{{ minute }}</span>
                <span class="unit">m</span>
                <span class="num">{{ second }}</span>
                <span class="unit">S</span>
            </p>
            <p v-else class="population_num">--</p>
        </div>
        <div class="num_box">
            <div class="text_t">员工分享总人数</div>
            <div class="text_num">{{ onReplace(state.staff_share_num) }}</div>
        </div>
        <div class="num_box">
            <div class="text_t">客户分享总人数</div>
            <div v-if="!isExternalLink" class="text_num">{{ onReplace(state.cust_share_num) }}</div>
            <div v-else class="text_num">--</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineExpose, ref, computed } from 'vue';
const state = ref({
    view_people: 0,
    view_num: 0,
    view_length: 0,
    staff_share_num: 0,
    cust_share_num: 0
});

const props = withDefaults(
    defineProps<{
        isExternalLink: boolean;
    }>(),
    {
        isExternalLink: false
    }
);

const minute = computed(() => {
    return Math.floor(state.value.view_length / 60) || 0;
});

const second = computed(() => {
    return Math.floor(state.value.view_length % 60) || 0;
});

const onReplace = (num: number) => `${num}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
const getState = (val: any) => {
    state.value = val;
};
defineExpose({
    getState
});
</script>

<style lang="scss" scoped>
.quantity_box {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 32px 24px;
    border: 1px solid #eaeaea;
    background-color: #fff;

    .boder {
        width: 1px;
        height: 104px;
        background: #f0f0f0;
        border-radius: 1px;
    }

    .num_box {
        text-align: left;

        .text_t {
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #666;
            line-height: 20px;
        }

        .text_num {
            padding-top: 8px;
            font-size: 30px;
            font-family: HelveticaNeue-Medium, HelveticaNeue;
            font-weight: 500;
            color: #33302d;
            line-height: 36px;
        }

        .population_num {
            display: flex;
            align-items: flex-end;
            font-size: 30px;
            font-family: HelveticaNeue-Medium, HelveticaNeue;
            font-weight: 500;
            color: #33302d;
            padding-top: 8px;
            line-height: 36px;

            span {
                margin-right: 4px;
                color: #33302d;

                &:last-of-type {
                    margin-right: 0;
                }
            }

            .num {
                font-size: 30px;
                font-family: HelveticaNeue-Medium, HelveticaNeue;
                font-weight: 500;
                color: #33302d;
                line-height: 36px;
            }

            .unit {
                font-size: 18px;
                line-height: 1;
                padding-bottom: 2px;
            }
        }
    }
}
</style>
